<template>
  <div class="about">
    <h1>教师详情</h1>
    <el-button type="primary" icon="el-icon-back" @click="back"></el-button>
    <div class="teacher-form">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" v-model="name" placeholder="请输入用户名" />
      </div>

      <div class="form-group">
        <label>昵称</label>
        {{ nick }}
      </div>

      <div class="form-group">
        <label>生日</label>
        <input type="date" v-model="birthdata" />
      </div>

      <div class="form-group radio-group">
        <label>性别</label>
        <div>
          <label
            ><input type="radio" name="user_sex" v-model="sex" value="0" />
            男</label
          >
          <label
            ><input type="radio" name="user_sex" v-model="sex" value="1" />
            女</label
          >
        </div>
      </div>

      <div class="form-group radio-group">
        <label>教师类型</label>
        {{ teachertype | type }}
      </div>

      <div class="form-group">
        <label>电话</label>
        {{ iphone }}
      </div>

      <button class="submit-btn" @click="updata">确定修改</button>
    </div>
    <div>
      <div class="notification" :class="notificationClass" v-if="show">
        修改成功
      </div>
    </div>
  </div>
</template>

<script>
import https from "@/utils/https";
export default {
  data() {
    return {
      id: 0,
      name: "",
      nick: "",
      sex: 0,
      birthdata: "",
      teachertype: 1,
      iphone: "",
      show: false,
      notificationClass: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    https
      .detaUserList({ id: this.id })
      .then((a) => {
        this.name = a.name;
        this.nick = a.nick;
        this.sex = a.sex;
        this.birthdata = a.birthdata;
        this.teachertype = a.teachertype;
        this.iphone = a.iphone;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    updata() {
      https
        .updataUserList({
          id: this.id,
          name: this.name,
          // nick: this.nick,
          sex: this.sex,
          birthdata: this.birthdata,
          // teachertype: this.teachertype,
          // iphone: this.iphone,
        })
        .then((a) => {
          this.show = true;
          this.notificationClass = "show";
          setTimeout(() => {
            this.notificationClass = "hide";

            // 动画结束后移除DOM
            setTimeout(() => {
              this.showNotification = false;
            }, 300);
          }, 2000);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    back() {
      this.$router.back();
    },
  },
  filters: {
    type(a) {
      if (a == 1) {
        return "讲师";
      } else if (a == 2) {
        return "班主任";
      }
    },
  },
};
</script>
<style lang='less' scoped>
// 变量定义
@primary-color: #409eff;
@border-color: #dcdfe6;
@hover-color: #ecf5ff;
@text-color: #606266;
@radius: 4px;
@transition: all 0.3s ease;

// 表单容器
.teacher-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

// 表单组
.form-group {
  margin-bottom: 20px;

  label {
    display: block;
    margin-bottom: 8px;
    color: @text-color;
    font-weight: 500;
  }

  input[type="text"],
  input[type="tel"],
  input[type="date"] {
    width: 90%;
    height: 40px;
    padding: 0 15px;
    border: 1px solid @border-color;
    border-radius: @radius;
    transition: @transition;

    &:focus {
      border-color: @primary-color;
      outline: none;
      box-shadow: 0 0 0 2px fade(@primary-color, 20%);
    }

    &::placeholder {
      color: #c0c4cc;
    }
  }

  // 单选按钮组
  &.radio-group {
    div {
      display: flex;
      gap: 20px;
      margin-top: 8px;
    }

    label {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      cursor: pointer;

      input[type="radio"] {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        appearance: none;
        border: 1px solid @border-color;
        border-radius: 50%;
        transition: @transition;
        position: relative;

        &:checked {
          border-color: @primary-color;
          background-color: @primary-color;

          &::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
          }
        }

        &:hover {
          border-color: @primary-color;
        }
      }
    }
  }
}

// 提交按钮
.submit-btn {
  width: 100%;
  height: 40px;
  background: @primary-color;
  color: white;
  border: none;
  border-radius: @radius;
  font-size: 16px;
  cursor: pointer;
  transition: @transition;

  &:hover {
    background: darken(@primary-color, 10%);
  }

  &:active {
    transform: scale(0.98);
  }
}

// 响应式调整
@media (max-width: 768px) {
  .teacher-form {
    padding: 15px;
  }

  .form-group.radio-group div {
    flex-direction: column;
    gap: 10px;
  }
}

@success-color: #67c23a;
@shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@success-transition: all 0.3s ease;

// 提示框样式
.notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 25px;
  background-color: @success-color;
  color: white;
  border-radius: 4px;
  box-shadow: @shadow;
  z-index: 2000;
  opacity: 0;
  transition: @transition;

  // 显示时的动画
  &.show {
    opacity: 1;
    transform: translate(-50%, -60%);
  }

  // 隐藏时的动画
  &.hide {
    opacity: 0;
    transform: translate(-50%, -70%);
  }
}
</style>